<template>
	<view class="main">
		<delVue :Visible="show" @isModal="gomodal" @goStay="gostay" :oneText="one" :twoText="two" :threeText="threeText"
			:fourText="fourText" />
		<delVue :Visible="isshow" @isModal="modal" @goStay="stay" :oneText="one" :twoText="two" :threeText="three"
			:fourText="four" />
		<view class="title">
			<alltitleVue :title="title" :url="url" />
			<view class="top" v-for="(item,index) in list">
				<view class="top-box" v-if="isStatus.status==item.status">
					<image :src="item.url" mode=""></image>
					<view class="">
						<view class="" :class="{'successful':isStatus.status==200}">
							{{item.name || ''}}
						</view>
						<view class="text-co">
							{{item.text=="" ? countdown:item.text}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="conter">

			<view class="box">
				<view class="tit" v-if="isStatus.status==400 || isStatus.status==500">
					退号信息
				</view>
				<view class="one">
					<view class="one-le">
						就诊人
					</view>
					<view class="one-ri">
						{{isStatus.hisPatientVo.name || ''}}
					</view>
				</view>
				<view class="one">
					<view class="one-le">
						就诊机构
					</view>
					<view class="one-ri">
						成都西南中医医院
					</view>
				</view>
				<view class="one">
					<view class="one-le">
						就诊地址
					</view>
					<view class="one-ri">
						四川省成都市金牛区一环路西三段抚琴
					</view>
				</view>
				<view class="one">
					<view class="one-le">
						就诊科室
					</view>
					<view class="one-ri">
						{{isStatus.hisDoctorVo.title || ''}}
					</view>
				</view>
				<view class="one">
					<view class="one-le">
						就诊医生
					</view>
					<view class="one-ri">
						{{isStatus.hisDoctorVo.name || ''}} <text>{{isStatus.hisDoctorVo.title || ''}} </text>
					</view>
				</view>
				<view class="one">
					<view class="one-le">
						挂号费用
					</view>
					<view class="one-ri">
						{{isStatus.totalPrice>0?`￥${isStatus.totalPrice}`:'免费'}}
					</view>
				</view>
				<view class="one">
					<view class="one-le">
						预约单号
					</view>
					<view class="one-ri">
						{{isStatus.orderNumber || ''}}
					</view>
				</view>
			</view>
			<view class="box">
				<view class="box-tit" v-if="isStatus.status==300 || isStatus.status==500 || isStatus.status==501">
					温馨提示
				</view>
				<view class="box-text" v-if="isStatus.status==100 || isStatus.status==200">
					<view class="" v-if="isStatus.status==100">
						支付：请在30分钟内完成支付；
					</view>
					<view class="">
						1、就诊：就诊当天到院后，请在医院找到医生，<text>向医生出示预约挂号成功记录后就诊；</text>
					</view>
					<view class="">
						2、就诊：预约挂号缴费成功后，<text>客服会在五分钟内通过在线沟通的方式联系您，</text>沟通具体就诊时间及注意事项；
					</view>
					<view class="">
						3、退号：本次预约就诊当天不可取消预约，如需取消，<text>请在就诊前1天的24:00前</text>可在[我的挂号]内在线退号，逾期不再办理；
					</view>
					<view class="">
						4、退号：一个自然月挂号缴费成功后有3次退号机会，<text>超量后不可再次退号；</text>
					</view>
				</view>

				<view class="box-text" v-if="isStatus.status==500 || isStatus.status==300">
					1、就诊：你的号源已取消，若需看诊请重新挂号；
				</view>
				<view class="box-text" v-if="isStatus.status==501">
					1、你的退款已申请，等待审批通过
				</view>
			</view>




		</view>
		<view class="btn">
			<view class="connection-box"
				v-if="(isStatus.status == 501 || isStatus.status == 500 || isStatus.status == 300) && backType != 'payment'">
				<button class="swipers-btn" open-type="contact"></button>
				<view class="connection">
					联系客服
				</view>
			</view>

			<view class="backType-box" v-if="isStatus.status == 200  && backType == 'payment'">
				<view class="butt butts" @click="goOrder">
					挂号记录
				</view>
				<view class="connection-box connection-box-width">
					<button class="swipers-btn swipers-width" open-type="contact"></button>
					<view class="connection connection-width">
						联系客服
					</view>
				</view>
			</view>

			<view class="btn-box"
				v-if="backType != 'payment' && isStatus.status !=300 && isStatus.status !=500 && isStatus.status !=501">
				<view class="butt butts" v-if="isStatus.status==200" @click="refund">
					申请退号
				</view>
				<view class="butt butts" v-if="isStatus.status==100" @click="Cancel">
					取消订单
				</view>
				<view class="butt" v-if="isStatus.status==100" @click="pay">
					去支付
				</view>
				<view class="connection-box connection-box-width" v-if="isStatus.status!=100">
					<button class="swipers-btn swipers-width" open-type="contact"></button>
					<view class="connection connection-width">
						联系客服
					</view>
				</view>

			</view>

		</view>
	</view>


</template>

<script>
	import {
		toast,
		getStore,
		setStore,
		getDate,
		validateIdCard
	} from "@/utils";
	import config from "../../utils/config";
	import delVue from '../../components/del.vue';
	import {
		registrationdetails,

		//取消挂号
		delRegistration,
		putReg,
		payOrders

	} from '../../service/api.js'
	export default {
		components: {
			delVue
		},
		data() {
			return {
				backType: "",
				info: "",
				title: "预约信息详情",
				orderTime: "2024-12-14 17:01:00",
				countdown: "", // 用于存储倒计时的字符串
				isshow: false,
				show: false,

				threeText: "是否取消订单",
				fourText: "提示",
				one: "再想想",
				two: "确定取消",
				three: "退号每月超过5次后将会加入黑名单影响您正常预约挂号，确定是否退号？",
				four: "提示",
				isStatus: {},
				payment: true,
				//订单状态
				status: '',
				list: [{
						status: 500,
						name: "已退款",
						text: "挂号费用已原路返回，请关注查询",
						url: config.topHost + '2024/12/28/ebf211eb02394bb09497888937fa7164.png',
					},
					{
						status: 300,
						name: "已取消",
						text: "挂号订单已取消，",
						url: config.topHost + '2024/12/28/ebf211eb02394bb09497888937fa7164.png',
					},
					{
						status: 501,
						name: "待退款",
						text: "退款申请已提交，请等待通过",
						url: config.topHost + '2024/12/28/0158e3a76397494cb4df17c79c833802.png',
					},
					{
						status: 100,
						text: "",
						name: "待支付",
						url: config.topHost + '2024/12/28/9691afaf42334238804b85ebd36ad123.png',
					},
					{
						status: 404,
						name: "待支付",
						text: "挂号费用将原路返回，请关注查询",
						url: config.topHost + '2024/12/28/9691afaf42334238804b85ebd36ad123.png',
					},
					{
						status: 200,
						name: "预约成功",
						text: "请在就诊当天前往医院就诊",
						url: config.topHost + '2024/12/28/3e2bb6c9fcbf40a3bf65f223c535918b.png',
					}
				]

			}
		},

		// created() {
		// 组件创建时启动倒计时更新
		// 	this.updateCountdown();
		// 每秒更新一次倒计时
		// 	this.interval = setInterval(this.updateCountdown, 1000);
		// },
		destroyed() {
			// 在组件销毁时清除定时器
			clearInterval(this.interval);
		},

		onLoad(options) {
			if (options.backType == 'payment') {
				this.backType = options.backType;
			}
			this.isStatus = JSON.parse(options.item);
			console.log(this.isStatus, "888888");
			this.getdetails();
		},
		methods: {
			refund() {
				this.isshow = true;
			},
			//这里执行退号操作
			stay(item) {
				this.refundReg(item)
			},
			modal(item) {
				this.isshow = item;
			},
			//申请退款方法
			async refundReg(item) {
				let res = await putReg({
					id: this.isStatus.id,
				})
				if (res.code == 200) {
					toast("退号已申请");
					this.isshow = item;
					this.getdetails();
				} else {
					toast(res.msg);
					this.isshow = item;
				}

			},




			//取消预约
			Cancel(status, item) {
				this.show = true;
				this.id = item.id
			},
			gomodal() {
				this.show = false
			},
			gostay(item) {

				this.delReg(item)
			},

			//取消预约
			async delReg(item) {
				let res = await delRegistration({
					id: this.isStatus.id,

				});
				if (res.code == 200) {
					toast("订单已取消");
					this.show = item;
					// debugger;
					this.getdetails();
				} else {
					this.show = item;
				}
			},


			async pay() {

				if (this.payment) {
					this.paySign(2)
				} else {
					toast("支付已超时")
				}

			},
			async paySign(index) {

				if (index == "1") {
					toast("支付宝支付暂未开放");
					return;
				}
				try {
					let params = {
						payType: index, //支付类型1:支付宝 2:微信
						orderNo: this.isStatus.orderNumber,
					};
					let res = await payOrders(params);
					console.log(res, "这里是什么数据")
					if (res.message == "未绑定微信！") {
						this.payBtnFlag = false;
						toast(res.message);
						setTimeout(() => {
							uni.navigateTo({
								url: "/My/setting",
							});
						}, 1500);
						return;
					}
					let data = res.data;
					console.log(data, "这里是否有东西");
					uni.requestPayment({
						provider: "wxpay",
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: (res) => {
							if (res.errMsg === "requestPayment:ok") {
								this.getdetails();
								toast("支付成功，耐心等候");

							}
						},
						fail: (err) => {
							toast("支付失败");
							setTimeout(() => {
								uni.navigateTo({
									url: `/My/register?index=${this.orderStatus.unpaid}&backType=payment`,
								});
							}, 1500);
						},
					});
				} catch (error) {
					toast("是否进这里")
				}
			},

			updateCountdown() {
				const orderDate = new Date(this.isStatus.createTime);
				const countdownTime = new Date(orderDate.getTime() + 10 * 60 * 1000); // 加30分钟
				const now = new Date();
				const timeDifference = countdownTime - now; // 计算差值
				if (timeDifference <= 0) {
					this.payment = false;
					this.countdown = "支付已超时"; // 倒计时结束
					clearInterval(this.interval); // 停止定时器
				} else {
					// 转换为小时:分钟:秒格式
					const hours = Math.floor(timeDifference / (1000 * 60 * 60));
					const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
					const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

					this.countdown = `请在${String(minutes).padStart(2, '0')}分钟${String(seconds).padStart(2, '0')}秒内支付`;
				}
			},

			//挂号记录
			goOrder() {
				uni.navigateTo({
					url: '/My/register/index'
				})
			},




			async getdetails() {
				let res = await registrationdetails(this.isStatus.id);

				if (res.code == 200) {

					this.isStatus = res.data;
					this.updateCountdown();
					this.interval = setInterval(this.updateCountdown, 1000);
					console.log(this.isStatus, "这里是否有值，，，")
					// this.synthesis = res.rows;
				}
			},

		},
	}
</script>

<style lang="scss" scoped>
	.main {
		.title {
			background: #fff;

		}

		.top {
			display: flex;

			align-items: center;
			font-weight: bold;
			font-size: 28rpx;

			image {
				width: 72rpx;
				height: 72rpx;
				margin-right: 10rpx;
			}

			.top-box {
				display: flex;
				align-items: center;
				margin-left: 48rpx;
				margin-bottom: 24rpx;

				.text-co {
					margin-top: 15rpx;
					color: #808080;
					font-size: 24rpx;
				}


			}
		}

		.btn {
			position: fixed;
			bottom: 0;
			z-index: 100000;
			left: 0;
			right: 0;

			width: 750rpx;
			padding-top: 24rpx;
			height: 144rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(206, 190, 165, 0.2);
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.btn-box {
				width: 702rpx;
				height: 80rpx;
				margin: auto;
				margin-top: 15rpx;
				display: flex;
				justify-content: space-between;

				.butt {
					width: 339rpx;
					height: 80rpx;
					border-radius: 8rpx;
					background: #CCA566;
					color: #FFFFFF;
					text-align: center;
					line-height: 80rpx;
				}

				.butts {
					color: #CCA566;
					background: #fff;
					border: 2rpx solid #CCA566;
				}
			}

			.connection-box {
				width: 702rpx;
				height: 80rpx;
				margin-top: 15rpx;
				margin: auto;
				position: relative;

				.connection {
					line-height: 80rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 32rpx;
					width: 702rpx;
					height: 80rpx;
					background: #CCA566;
					border-radius: 8rpx 8rpx 8rpx 8rpx;


				}

				.swipers-btn {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					opacity: 0;
					width: 702rpx;
					height: 80rpx;
				}
			}

		}

		.conter {
			padding: 24rpx;



			.box {
				margin-top: 24rpx;
				padding: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx;

				.box-tit {
					font-weight: bold;
					font-size: 28rpx;
					margin-bottom: 24rpx;
				}

				.box-text {
					font-size: 22rpx;
					color: #808080;

					view {
						margin-top: 12rpx;

						text {
							color: #CCA566;
						}
					}
				}

				.tit {
					font-weight: bold;
					font-size: 32rpx;
					padding-bottom: 24rpx;
					border-bottom: 1rpx solid #E6E6E6;
				}

				.one {
					display: flex;
					margin-top: 24rpx;
					align-items: flex-start;

					.one-le {
						color: #808080;
						width: 150rpx;


					}

					.one-ri {
						width: 420rpx;
						margin-left: 48rpx;

					}
				}
			}
		}

	}

	.connection-box-width {
		width: 339rpx !important;
		height: 80rpx;
	}

	.connection-width {
		width: 339rpx !important;
	}

	.swipers-width {
		width: 339rpx !important;
	}

	.backType-box {
		width: 702rpx;
		height: 80rpx;
		margin: auto;
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between;

		.butt {
			width: 339rpx;
			height: 80rpx;
			border-radius: 8rpx;
			background: #CCA566;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}

		.butts {
			color: #CCA566;
			background: #fff;
			border: 2rpx solid #CCA566;
		}

	}
</style>